<template>
  <view class="niceui-flex-column width-100p bg">
    <view class="niceui-flex-column">
      <image class="banner-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/09/18/sign3-banner_20250918141447A054.png" mode="widthFix"></image>
    </view>
    <view class="center-nav margin-top">
      <view class="center-nav-title">
        <text
          >已连续签到<text class="strong-text">{{ currentDay }}/{{ signInDays.length }}</text
          >天</text
        >
        <text class="signin-rule">签到规则 <text class="rule-more">&#xe600;</text></text>
      </view>
      <view class="days-area">
        <view class="six-day-bf">
          <view class="six-day-bf-item" v-for="(day, index) in signInDays.slice(0, -1)" :key="index" :class="index >= currentDay ? 'day-will' : 'day-over'" @click="showRewardDetail(day)">
            <template>
              <text class="six-day-bf-item-text">第{{ day.dayNum }}天</text>
              <image :src="day.image" class="six-day-bf-img" mode="widthFix" :class="isSpecialDay(index) ? 'six-day-bf-img-big' : ''"></image>
              <text class="six-day-bf-item-desc">{{ day.defaultType == 0 ? "现金红包" : day.defaultType == 1 ? "小礼品" : "惊喜礼包" }}</text>
            </template>
          </view>
        </view>
        <view class="seven-day" v-if="signInDays.length > 0">
          <view class="seven-day-item" :class="currentDay >= signInDays.length ? 'day-over' : 'day-will'" @click="showRewardDetail(signInDays[signInDays.length - 1])">
            <text class="six-day-bf-item-text">{{ signInDays[signInDays.length - 1].dayNum }}</text>
            <text class="seven-day-item-desc">{{
              signInDays[signInDays.length - 1].defaultType == 0 ? "现金红包" : signInDays[signInDays.length - 1].defaultType == 1 ? "小礼品" : "惊喜礼包"
            }}</text>
            <image :src="signInDays[signInDays.length - 1].image" class="seven-day-item-img" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <view class="signin-button-container">
        <view class="signin-btn" :class="{ 'signin-btn-disabled': currentDay > signInDays.length }" @click="handleSignIn">
          <text class="signin-btn-text">{{ currentDay + 1 <= signInDays.length ? "立即签到" : "已完成签到" }}</text>
        </view>
      </view>
    </view>
    <view class="center-nav niceui-flex-row niceui-center niceui-between">
      <view class="niceui-flex-column padding-card">
        <view><text class="act-text">连签三周</text></view>
        <text class="other-text">即可获得<text class="strong-text">价值388元超值礼包！</text></text>
      </view>
      <image class="act-img" src="../../static/images/sign3-sup.png" mode="widthFix"></image>
    </view>
    <!--  <view class="center-nav">
      <view class="center-list-item">
        <view class="signin-item" v-for="(taskItem, index) in taskList" :key="index">
          <text class="signin-item-text">{{ taskItem.title }}</text>
          <text class="signin-item-desc">{{ taskItem.description }}</text>
          <image :src="IMG_URL + taskItem.image" class="signin-item-img" mode="widthFix" :class="index == 1 ? 'signin-item-img-small' : ''"></image>
        </view>
      </view>
    </view> -->

    <!-- 签到成功弹窗 -->
    <view class="popup" v-if="showSuccessPopup">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">签到成功</text>
          <view class="close-button" @click="closePopup">✕</view>
        </view>
        <view class="popup-body">
          <view class="reward-container">
            <image class="reward-icon" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/09/18/sign3-gift_20250918150604A001.png" mode="aspectFit"></image>
            <text class="reward-text">获得奖励：{{ getCurrentDayReward() }}</text>
          </view>
        </view>
        <view class="popup-footer">
          <view class="confirm-button" @click="closePopup">
            <text class="confirm-button-text">确定</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 奖励详情弹窗 -->
    <view class="popup" v-if="showRewardDetailPopup">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">奖励详情</text>
          <view class="close-button" @click="closeRewardDetailPopup">✕</view>
        </view>
        <view class="popup-body">
          <view class="reward-detail-container">
            <image class="reward-detail-icon" :src="selectedReward.image" mode="aspectFit"></image>
            <view class="reward-detail-info">
              <text class="reward-detail-day">第{{ selectedReward.dayNum }}天签到奖励</text>
              <text class="reward-detail-type">{{ getRewardTypeText(selectedReward.defaultType) }}</text>
              <view class="reward-detail-desc" v-if="selectedReward.integralNum">
                <text>奖励积分：{{ selectedReward.integralNum }}</text>
              </view>
              <view class="reward-detail-desc" v-if="selectedReward.defaultType == 1 || (selectedReward.defaultType == 2 && selectedReward.ebSignGift)">
                <image style="width: 100rpx; height: 100rpx" :src="IMG_URL + selectedReward.ebSignGift.images" alt="" />
                <text>线下礼品：{{ selectedReward.ebSignGift.name }}</text>
              </view>
              <view class="reward-detail-status">
                <text :class="isRewardReceived(selectedReward) ? 'received' : 'not-received'">
                  {{ isRewardReceived(selectedReward) ? "已领取" : "未领取" }}
                </text>
              </view>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <view class="confirm-button" @click="closeRewardDetailPopup">
            <text class="confirm-button-text">确定</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { IMG_URL } from "../../config/index.js";
import { qddatelist, addQd } from "../../utils/request_api.js";
export default {
  data() {
    return {
      IMG_URL,
      showSuccessPopup: false,
      showRewardDetailPopup: false,
      selectedReward: {},

      signInDays: [],
      currentDay: 0, // 当前签到天数，1表示第一天未签到
      taskList: [
        {
          image: "sign3-plus.png",
          title: "补签卡",
          description: "888张补签卡",
          class: "color-1",
        },
        {
          image: "sign3-task.png",
          title: "会员任务",
          description: "做任务赚积分",
          class: "color-1",
        },
        {
          image: "sign3-shop.png",
          title: "积分商城",
          description: "小积分大价值",
          class: "color-1",
        },
      ],
    };
  },
  computed: {
    /*     signInDays() {
      return this.signInDays.slice(0, 6);
    }, */
  },
  onLoad(options) {
    this.getUseLIst();
  },
  methods: {
    /* 获取用户签到记录 */
    getUseLIst() {
      qddatelist(uni.getStorageSync("uid")).then((res) => {
        this.startTime = res.data.rule.startTime; /* 签到周期开始时间 */
        this.endTime = res.data.rule.endTime; /* 签到周期结束时间 */
        this.signInDays = res.data.awardList; /* 签到周期奖励列表  */
        this.currentDay = res.data.signCount;
        console.log("🚀 ~ getUseLIst ~ this.currentDay:", this.currentDay);
        /* 奖励列表中，判断defaultType 0 现金红包 1 小礼品 2 惊喜礼包 ，来决定图片用什么*/
        this.signInDays.forEach((item) => {
          if (item.defaultType == 0) {
            item.image = "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/09/19/11111_20250919142730A003.png";
          } else if (item.defaultType == 1) {
            item.image = "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/09/18/sign3-gift_20250918162811A001.png";
          } else if (item.defaultType == 2) {
            item.image = "https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/09/18/礼包_20250918142031A055.png";
          }
        });
      });
    },
    isSpecialDay(index) {
      // 修改为只有最后一个签到日是特殊样式
      return false;
    },
    handleSignIn() {
      // 检查是否还能签到
      if (this.currentDay + 1 > this.signInDays.length) {
        console.log("签到已完成");
        return;
      }

      // 获取当前签到日的详细参数
      const currentDayData = this.signInDays[this.currentDay];
      console.log("当前签到天数参数:", currentDayData);

      // 执行签到
      console.log("签到触发，当前为第" + this.currentDay + "天");

      // 更新签到状态

      /* currentDayData 删除对象中的创建时间参数*/

      addQd({
        uid: uni.getStorageSync("uid"),
        type: currentDayData.defaultType,
        dayNum: currentDayData.dayNum,
        ebSignMainConfigId: currentDayData.ebSignMainConfigId,
        ebSignMainConfigDefault: currentDayData.id ? 0 : 1,
        fetchIntegralNum: currentDayData.integralNum,
        ebSignMconfigId: currentDayData.id,
        isFetchGift: 0,
      }).then((res) => {
        console.log("🚀 ~ handleSignIn ~ res:", res);
        if (res.code == 200) {
          if (res.data == 1) {
            this.showSuccessPopup = true;
          } else {
            uni.showToast({
              title: "今日已签到,请明天再来~ ",
              icon: "none",
              duration: 2000,
            });
          }
        }
        /* this.currentDay += 1; */
        this.getUseLIst();
      });
    },
    closePopup() {
      this.showSuccessPopup = false;
    },
    getCurrentDayReward() {
      // 获取当前签到日的奖励
      if (this.currentDay > 1 && this.currentDay <= this.signInDays.length + 1) {
        return this.signInDays[this.currentDay - 2].reward;
      }
      return "";
    },
    // 显示奖励详情
    showRewardDetail(reward) {
      this.selectedReward = reward;
      this.showRewardDetailPopup = true;
    },
    // 关闭奖励详情弹窗
    closeRewardDetailPopup() {
      this.showRewardDetailPopup = false;
    },
    // 获取奖励类型文本
    getRewardTypeText(type) {
      switch (type) {
        case 0:
          return "现金红包";
        case 1:
          return "小礼品";
        case 2:
          return "惊喜礼包";
        default:
          return "未知奖励";
      }
    },
    // 判断奖励是否已领取
    isRewardReceived(reward) {
      // 根据当前签到天数和奖励天数判断是否已领取
      return reward.dayNum <= this.currentDay;
    },
  },
};
</script>
<style>
@font-face {
  font-family: texticons;
  font-weight: normal;
  font-style: normal;
  src: url("https://at.alicdn.com/t/c/font_4382910_1bcgyhz3rqw.ttf?t=1703216704048") format("truetype");
}

page,
view {
  display: flex;
}

page {
  background-color: #fff;
}

.niceui-flex-column {
  flex-direction: column;
}
.niceui-flex-row {
  flex-direction: row !important;
}
.niceui-center {
  align-items: center;
}
.niceui-between {
  justify-content: space-between;
}
.width-100p {
  width: 100%;
}
</style>
<style lang="scss" scoped>
$head-color: #cd3b33;
$white-color: #fff;
$radius: 20rpx;
$border-color: #efefef;
$color-1: #007aff;
$color-2: #4cd964;
$color-3: #f0ad4e;
$color-4: #dd524d;
$list-item-height: 100rpx;
$list-margin: 20rpx;
$leftColor: #f8621a;
$rightColor: #fb313a;
.bg {
  background-image: linear-gradient(to right, $leftColor, $rightColor);
  height: 100vh;
}
.banner {
  width: 100vw;
  height: 290rpx;
  padding: 20rpx 50rpx 35rpx;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  z-index: 9;
  top: 0;

  text {
    color: #fff;
  }
}
.banner-img {
  width: 100%;
}
.days-area {
  margin: 10rpx 0 20rpx;
}
.day-will {
  background-color: #eeeeee;
}
.day-over {
  background-color: #f8eada;
}
.six-day-bf {
  width: 67%;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 10rpx 5rpx 10rpx 10rpx;
}
.six-day-bf-item {
  width: calc(33% - 12rpx);
  flex-direction: column;
  align-items: center;
  margin: 6rpx;
  border-radius: 10rpx;
  padding: 10rpx 0;
}
.six-day-bf-img {
  width: 80rpx;
  margin: 15rpx 0;
}
.six-day-bf-img-big {
  width: 80rpx;
}
.six-day-bf-item-text {
  font-size: 24rpx;
  color: #956d35;
  text-align: left;
  display: inline-block;
  width: 80%;
}
.six-day-bf-item-desc {
  font-size: 24rpx;
  color: #715329;
}
.seven-day {
  width: 33%;
  margin: 10rpx 10rpx 10rpx 0;
}
.seven-day-item {
  width: calc(100% - 5rpx);
  margin: 6rpx 6px 3px 0;
  border-radius: 10rpx;
  padding: 10rpx 0;
  flex-direction: column;
  align-items: center;
}
.seven-day-item-desc {
  font-size: 26rpx;
  color: #d3484a;
  font-weight: bold;
  margin-top: 20rpx;
  margin-left: 20rpx;
  margin-right: 15rpx;
}
.seven-day-item-img {
  width: 160rpx;
  margin-top: 30rpx;
}

.center-list-item {
  width: 100%;
  box-sizing: border-box;
  flex-direction: row;
  padding: 0rpx 30rpx;
  justify-content: space-around;
  .signin-item {
    flex-direction: column;
    align-items: center;
  }
  .signin-item-img {
    width: 185rpx;
    margin-bottom: 35rpx;
  }
  .signin-item-img-small {
    width: 160rpx;
  }
  .signin-item-text {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
    margin-top: 40rpx;
  }
  .signin-item-desc {
    font-size: 26rpx;
    color: #666;
    margin: 10rpx 0 20rpx;
  }
}
.border-bottom {
  border-bottom-width: 1rpx;
  border-color: $border-color;
  border-bottom-style: solid;
}

.center-nav {
  background-color: #ffffff;
  margin: 0rpx auto $list-margin;
  width: calc(100vw - 50rpx);
  flex-direction: column;
  border-radius: $radius;
  box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.1);

  .center-nav-title {
    padding: 25rpx 30rpx;
    font-size: 34rpx;
    color: #333;
    font-weight: 400;
    border-bottom: solid 1rpx $border-color;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .signin-rule {
    color: #999;
    font-size: 26rpx;
  }
  .rule-more {
    color: #999;
    font-size: 26rpx;
    font-family: texticons;
  }
  .center-nav-content {
    height: 180rpx;
    display: flex;
    align-items: center;
  }
}
.margin-top {
  margin-top: 0rpx;
  min-height: 230rpx;
}
.act-text {
  font-size: 38rpx;
  color: #333;
  font-weight: bold;
}
.other-text {
  font-size: 26rpx;
  color: #888;
  margin-top: 10rpx;
}
.strong-text {
  color: #fe474e;
}
.other-go {
  background-color: #fe474e;
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  border-radius: 60rpx;
  display: inline-block;
  font-size: 24rpx;
  color: #fff;
  margin-left: 20rpx;
}
.act-img {
  width: 190rpx;
  margin-right: 30rpx;
}
.padding-card {
  padding: 45rpx 30rpx;
}

.signin-button-container {
  padding: 30rpx;
  display: flex;
  justify-content: center;
}

.signin-btn {
  width: 80%;
  height: 80rpx;
  background: linear-gradient(90deg, #ff9700, #ff0000);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 10rpx rgba(255, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.signin-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(25deg);
  transition: all 0.6s;
}

.signin-btn:hover::after {
  left: 140%;
}

.signin-btn-disabled {
  background: linear-gradient(90deg, #cccccc, #999999);
  box-shadow: 0 6rpx 10rpx rgba(153, 153, 153, 0.3);
}

.signin-btn-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background-color: white;
  border-radius: 20rpx;
  width: 80%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-button {
  font-size: 36rpx;
  color: #999;
  cursor: pointer;
}

.popup-body {
  padding: 40rpx 30rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  margin: 0 auto;
}

.reward-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reward-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 20rpx;
}

.reward-text {
  font-size: 28rpx;
  color: #ff6600;
  font-weight: bold;
}

.popup-footer {
  padding: 20rpx 30rpx 40rpx;
  display: flex;
  justify-content: center;
}

.confirm-button {
  width: 80%;
  height: 70rpx;
  background: linear-gradient(90deg, #ff9700, #ff0000);
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 10rpx rgba(255, 0, 0, 0.3);
}

.confirm-button-text {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: bold;
}
.reward-detail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reward-detail-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.reward-detail-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reward-detail-day {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.reward-detail-type {
  font-size: 28rpx;
  color: #ff6600;
  margin-bottom: 20rpx;
}

.reward-detail-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.reward-detail-status {
  font-size: 28rpx;
  font-weight: bold;
}

.received {
  color: #4cd964;
}

.not-received {
  color: #ff9900;
}
</style>
